<script lang="ts" setup>
	// Import Swiper Vue.js components
	import { Swiper, SwiperSlide } from 'swiper/vue'
	// Import Swiper styles
	import 'swiper/css'

	import 'swiper/css/pagination'
	import 'swiper/css/navigation'

	import { Autoplay, Navigation } from 'swiper/modules'
	import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
	import { ArticleApi } from '@/api/article'
	import { ref } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	const router = useRouter()
	const toDetail = (id : number) => {
		router.push({ name: 'communityDetail', query: { id: id } })
	}
	const modules = [Autoplay, Navigation]
	let articleList = ref<any>([])
	const getList = () => {
		ArticleApi.getSwiper().then((res : any) => {
			if (res.code == 1) {
				res.data.forEach((item:any,index:number)=>{
					item.imgList = item.img?item.img.split(","):[]
				})
				articleList.value = [...res.data]
			}
		})
	}
	getList()

	const swiperOption = {
		loop: true,
		autoplay: true,
		slidesPerView: 1,
		initialSlide: 1,
		navigation: {
			nextEl: '.my-swiper-button-prev',
			prevEl: '.my-swiper-button-next',
			hideOnClick: true
		}
	}
</script>

<template>
	<div class="swiper-box">
		<div class="my-swiper-button-next">
			<left-outlined />
		</div>
		<Swiper :space-between="30" :centered-slides="true" :rewind="true" :modules="modules" v-bind="swiperOption"
			class="mySwiper" :style="{
      '--swiper-navigation-color': '#1677ff',
	  '--swiper-pagination-bottom': '20px'
    }">
			<SwiperSlide v-for="(item, index) in articleList" :key="index" @click="toDetail(item.id)">
				<div class="swiper-item">
					<img :src="item.imgList[0]" class="img">
				</div>
			</SwiperSlide>
		</Swiper>
		<div class="my-swiper-button-prev">
			<right-outlined />
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.swiper-box {
		width: 1280px;
		padding-top: 110px;
		margin: 0 auto;
		position: relative;
		user-select: none;
		cursor: pointer;

		.my-swiper-button-next {
			flex-shrink: 0;
			cursor: pointer;
			font-size: 24px;
			border-radius: 50%;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 50px;
			height: 50px;
			color: rgba(0, 0, 0, 0);
			background-color: rgba(0, 0, 0, 0);
			transition: background-color 1s, color 0.5s;
			position: absolute;
			top: 50%;
			z-index: 2;
			right: 100%;
			transform: translate(130%, 50%);
		}

		.my-swiper-button-prev {
			flex-shrink: 0;
			cursor: pointer;
			font-size: 24px;
			border-radius: 50%;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 50px;
			height: 50px;
			color: rgba(0, 0, 0, 0);
			background-color: rgba(0, 0, 0, 0);
			transition: background-color 1s, color 0.5s;
			position: absolute;
			top: 50%;
			z-index: 1;
			left: 100%;
			transform: translate(-130%, 50%);
		}

		.swiper-item {
			.img {
				min-width: 1280px;
				height: 450px;
			}
		}
	}

	.swiper-box:hover {
		.my-swiper-button-next {
			color: rgba(0, 0, 0, 0.6);
			background-color: rgba(0, 0, 0, 0.1);
		}

		.my-swiper-button-prev {
			color: rgba(0, 0, 0, 0.6);
			background-color: rgba(0, 0, 0, 0.1);
		}

		.my-swiper-button-next:hover,
		.my-swiper-button-prev:hover {
			color: rgba(255, 255, 255, 1);
		}
	}
</style>